<template>
  <!-- 导航栏容器 -->
  <div class="oj-navbar">
    <!-- 左侧菜单区域 -->
    <div class="oj-navbar-menus">
      <!-- 网站 Logo -->
      <img class="oj-navbar-logo" src="@/assets/logo.png" />
      <!-- Element Plus 的菜单组件，mode="horizontal" 表示水平菜单 -->
      <el-menu router class="oj-navbar-menu" mode="horizontal">
        <!-- 菜单项：题库，点击跳转到 /c-oj/home/question -->
        <el-menu-item index="/c-oj/home/question">题库</el-menu-item>
        <!-- 菜单项：竞赛，点击跳转到 /c-oj/home/exam -->
        <el-menu-item index="/c-oj/home/exam">竞赛</el-menu-item>
      </el-menu>
    </div>

    <!-- 右侧用户区域 -->
    <div class="oj-navbar-users">
      <!-- 如果用户已登录，显示消息图标 -->
      <img v-if="isLogin" class="oj-message" @click="goMessage" src="@/assets/message/message.png" />
      <!-- 如果用户已登录，显示用户信息下拉菜单 -->
      <el-dropdown v-if="isLogin">
        <!-- 用户信息展示区域 -->
        <div class="oj-navbar-name">
          <!-- 用户头像 -->
          <img class="oj-head-image" v-if="isLogin" :src="userInfo.headImage" />
          <!-- 用户昵称 -->
          <span>{{ userInfo.nickName }}</span>
        </div>
        <!-- 下拉菜单内容 -->
        <template #dropdown>
          <el-dropdown-menu>
            <!-- 个人中心菜单项 -->
            <el-dropdown-item @click="goUserDetail">
              <div class="oj-navabar-item">
                <span>个人中心</span>
              </div>
            </el-dropdown-item>
            <!-- 我的竞赛菜单项 -->
            <el-dropdown-item @click="goMyExam">
              <div class="oj-navabar-item">
                <span>我的竞赛</span>
              </div>
            </el-dropdown-item>
            <!-- 退出登录菜单项 -->
            <el-dropdown-item>
              <div class="oj-navabar-item">
                <span @click="handleLogout">退出登录</span>
              </div>
            </el-dropdown-item>
          </el-dropdown-menu>
        </template>
      </el-dropdown>
      <!-- 如果用户未登录，显示登录按钮 -->
      <span class="oj-navbar-login-btn" v-if="!isLogin" @click="goLogin">登录</span>
    </div>
  </div>
</template>

<script setup>
import { reactive, ref } from 'vue';
import router from '@/router';
import cookikService from '@/utils/cookie-service';
import userService from '@/apis/user-service';


const isLogin = ref(false); // 是否登录的状态

// 用户信息对象
const userInfo = reactive({
  nickName: '',
  headImage: ''
});

// 检查用户是否登录
async function checkLogin() {
  // 如果 Cookie 中存在 token
  if (cookikService.getToken()) {
    const userInfoRes = await userService.getUserInfo();  // 调用后端接口获取用户信息
    Object.assign(userInfo, userInfoRes.data);            // 将用户信息赋值给 userInfo 对象
    isLogin.value = true; // 更新登录状态为 true
  }
}
// 页面加载时检查登录状态
checkLogin();

// 跳转到登录页面
function goLogin() {
  router.push('/c-oj/login');
}

// 跳转到我的竞赛页面
function goMyExam() {
  router.push('/c-oj/home/user/exam');
}

// 跳转到个人中心页面
function goUserDetail() {
  router.push('/c-oj/home/user/detail');
}

// 跳转到消息页面
function goMessage() {
  router.push('/c-oj/home/user/message');
}

// 处理退出登录
async function handleLogout() {
  // 弹出确认框
  await ElMessageBox.confirm(
    '确认退出',
    '温馨提示',
    {
      confirmButtonText: '确认',
      cancelButtonText: '退出',
      type: 'warning',
    }
  );
  // 调用后端退出登录接口
  await userService.logout();
  // 移除 Cookie 中的 token
  cookikService.removeToken();
  // 更新登录状态为 false
  isLogin.value = false;
}
</script>

<style lang="scss" scoped>
.oj-navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 20px;
  box-sizing: border-box;

  max-width: 1520px;
  margin: 0 auto;

  .oj-navbar-menus {
    display: flex;
    align-items: center;
    height: 50px;

    .el-menu-item {
      font-family: PingFangSC, PingFang SC;
      font-weight: 400;
      font-size: 20px;
      color: #222222;
      line-height: 28px;
      text-align: center;
      width: 42px;
      text-align: left;
      margin-right: 25px;
    }
  }

  .oj-navbar-logo {
    width: 38px;
    height: 38px;
    background: #32C5FF;
    border-radius: 8px;
    cursor: pointer;
    object-fit: contain;
    margin-right: 59px;
  }

  .oj-navbar-menu {
    // margin-left: 18px;
    width: 600px;
    border: none;

    .el-menu-item {
      font-size: 16px;
      font-weight: 500;
      background-color: transparent !important;
      transition: none;
      border: none;
      line-height: 60px;
    }
  }

  .oj-navbar-users {
    display: flex;
    align-items: center;
  }

  .oj-navbar-login-btn {
    line-height: 60px;
    display: inline-block;
    font-family: PingFangSC, PingFang SC;
    font-weight: 400;
    font-size: 18px;
    color: #222222;
    text-align: center;
    cursor: pointer;

    .line {
      display: inline-block;
      width: 25px;
    }
  }

  .oj-message {
    cursor: pointer;
    margin-top: 15px;
  }

  .oj-head-image {
    width: 30px;
    height: 30px;
    border-radius: 30px;
    margin-right: 10px;
  }

  .oj-navbar-name {
    cursor: pointer;
    margin-top: 15px;
    font-weight: 400;
    color: #000;
    margin-left: 15px;
    font-size: 20px;
    width: 100px;
    display: flex;
    align-items: center;
  }

  .oj-navabar-item {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 32px;
  }
}
</style>